<template>
  <div>
    <div>
      <el-input
        size="medium"
        class="selectInput"
        placeholder="输入关键字查询"
        v-model="selectKey"
        suffix-icon="el-icon-circle-plus-outline">
      </el-input>
      <el-button
        size="medium" type="success" plain @click="doSearch">查询
      </el-button>
      <el-tooltip class="item" effect="dark" content="查看更多商品，去租赁！！！" placement="right">
        <el-button @click="toMain" size="medium" type="info" icon="el-icon-more-outline" plain></el-button>
      </el-tooltip>
    </div>
    <div>
      <el-table
        border
        height="486"
        ref="tableData"
        :data="tableData"
        style="width: 100%;"
        @expand-change="handle_list"
        :default-sort = "{prop: 'createTime', order: 'descending'}">
        <el-table-column prop="children" type="expand" label="查看商品" width="80px">
          <template slot-scope="scope">
            <el-table
              stripe
              border
              :data="scope.row.children"
              tooltip-effect="light"
              style="width: 100%"
              :cell-style="{padding: '0'}">
              <el-table-column
                prop="goodId"
                label="商品编号"
                width="80">
              </el-table-column>
              <el-table-column
                property="goodName"
                label="商品名称"
                :show-overflow-tooltip="true"
                width="180">
              </el-table-column>
              <el-table-column
                property="category"
                label="商品类型"
                width="100">
              </el-table-column>
              <el-table-column
                property="imgurl"
                label="商品图"
                width="70">
                <template #default="scope">
                  <el-image class="table-td-thumb" :src="scope.row.imgurl" :preview-src-list="[scope.row.imgurl]">
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column
                property="rentPriceHour"
                label="价格/小时"
                width="90">
              </el-table-column>
              <el-table-column
                property="rentPriceDay"
                label="价格/天"
                width="80">
              </el-table-column>
              <el-table-column
                property="brand"
                label="商品品牌"
                width="120">
              </el-table-column>
              <el-table-column
                property="goodNewold"
                label="新旧程度"
                width="120">
              </el-table-column>
              <el-table-column
                property="description"
                label="商品描述"
                width="220"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column
                property="description"
                label="使用需知"
                width="230"
                :show-overflow-tooltip="true">
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <!--<el-table-column-->
        <!--prop="rentId"-->
        <!--label="租赁编号"-->
        <!--sortable-->
        <!--width="120">-->
        <!--</el-table-column>-->
        <el-table-column
          prop="goodId"
          label="商品编号"
          sortable
          width="110">
        </el-table-column>
        <el-table-column
          prop="number"
          label="数量"
          width="50">
        </el-table-column>
        <el-table-column
          prop="singlePrice"
          label="价格/小时"
          width="90">
          <template slot-scope="scope">
            {{scope.row.singlePrice==null?'-':scope.row.singlePrice}}
          </template>
        </el-table-column>
        <el-table-column
          prop="dayPrice"
          label="价格/天"
          width="80">
          <template slot-scope="scope">
            {{scope.row.dayPrice==null?'-':scope.row.dayPrice}}
          </template>
        </el-table-column>
        <el-table-column
          prop="tolRentPrice"
          label="总价"
          width="100">
        </el-table-column>
        <el-table-column
        prop="rentState"
        label="租赁状态"
        width="80">
        <template slot-scope="scope">
        <el-tag size="small" :type="scope.row.rentState=='0'?'danger':''">
        {{scope.row.rentState=='0'?'未发货':scope.row.rentState=='1'?'派送中':'已收货'}}
        </el-tag>
        </template>
        </el-table-column>
        <el-table-column
          prop="paystate"
          label="支付状态"
          width="80">
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.paystate=='0'?'danger':'success'">
              {{scope.row.paystate=='0'?'未付款':'已支付'}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="starttime"
          label="租赁开始时间"
          sortable
          width="170">
        </el-table-column>
        <el-table-column
          prop="endtime"
          label="租赁结束时间"
          sortable
          width="170">
        </el-table-column>
        <el-table-column
          prop="orderAddress"
          label="地址"
          width="60">
        </el-table-column>
        <el-table-column
          prop="rentTime"
          label="下单时间"
          width="170">
        </el-table-column>
        <el-table-column label="操作" width="130" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="danger" size="mini" plain @click="updateStatus(scope.$index, scope.row)">确认收货
              <i class="el-icon-success el-icon--right"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {

    name: 'RentPay',
    data() {
      return {
        user:JSON.parse(window.sessionStorage.getItem('user')),
        tableData: [],
        selectKey:'',
        good:{},
        paystate:'1',
        deliver:{
          rentId:'',
          rentState:'2',
          dayPrice:'',
          singlePrice:'',
        },
      }
    },
    mounted () {
      this.initTable();
    },
    methods: {
      toMain(){
        this.$router.push('/main');
      },
      // 修改收货状态
      updateStatus(index,data){
        console.log('singlePrice='+data.singlePrice+'dayPrice='+data.dayPrice)
        this.deliver.rentId=data.rentId;
        if(data.dayPrice){
          this.deliver.dayPrice=data.dayPrice;
          console.log(this.deliver.dayPrice)
        }
        if(data.singlePrice){
          this.deliver.singlePrice=data.singlePrice
          console.log(this.deliver.singlePrice)
        }
        this.$confirm('确定收货吗?', '收货提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          // 修改商品状态
          this.putRequest('/rent/data/updateRent',this.deliver).then(resp=>{
            if (resp){
              this.initTable();
              this.$notify.success({ title: '成功', message: '收货成功' });
              this.deliver.dayPrice='';
              this.deliver.singlePrice=''
              this.deliver.rentId=''
            }
          })
        }).catch(() => {
          this.$notify.info({ title: '消息', message: '已取消收货' });
        });
      },
      // 初始化
      initTable(){
        let userId = parseInt(this.user.userId);
        let url = '/rent/data/listRent/?userId='+userId+'&&paystate='+this.paystate+'&&selectKey='+'';
        this.postRequest(url).then(resp => {
          if (resp) {
            //给每行数据强制追加一个数据项
            resp.map(item => {
              item.children = [];
            });
            this.tableData = resp;
            this.deliver.rentId=resp.rentId;
            console.log(this.tableData);
          }
        });
      },
      // 表格展开事件
      handle_list(row,expandedRows) {
        console.log(row);
        console.log(expandedRows);
        if (expandedRows.length > 0) {
          this.postRequest('/rent/data/good/' + row.goodId).then(resp => {
            if (resp) {
              console.log(resp)
              // row.children = Object.values(resp);
              // this.tableData.push(row.children);

              this.tableData.forEach((temp, index) => {
                // 找到当前点击的行，把动态获取到的数据赋值进去
                if (temp.goodId === row.goodId) {
                  if (this.tableData[index].children.length===0) {
                    this.tableData[index].children.push(resp);
                  }
                }
              });
            }
          })
        }else {
          this.tableData.children = [];
        }
      },
      doSearch(){
        if (this.selectKey) {
          this.tableData='';
          let userId = parseInt(this.user.userId);
          let url = '/rent/data/listRent/?userId='+userId+'&&paystate='+this.paystate+'&&selectKey='+this.selectKey;
          this.postRequest(url).then(resp => {
            if (resp) {
              //给每行数据强制追加一个数据项children
              resp.map(item => {
                item.children = [];
              });
              this.tableData = resp;
              console.log(this.tableData);
            }
          });
          this.selectKey='';
        }else{
          this.initTable();
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .selectInput{
    width: 220px;
    margin: 10px 10px 10px 15px;
  }
  .price {
    display: block;
    color: #d44d44;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-align: right;
    i {
      padding-left: 2px;
      font-size: 24px;
    }
  }
  .item {
    margin: 10px;
  }
</style>
